<template>
	<view class="container">
		<steps 
			typeCode="TiaoBan" 
			apiname="getPermitChangeWorkType"
			:apiparam="apiparam"
			:detail="reason" 
			:brief="brief" 
			:notEmpty="notEmpty"
			:disabled="disabled"
			:checkResult="checkResult"
			:insflowid="insflowid"
			@confirm="confirm">
			<view class="container__des">班次1</view>
			<view class="container__list">
				<view class="container__list--item" hover-class="clickable" @click="goSelct(1)">
					<view class="container__list--item--text">
						<text class="container__list--item--text-symbol">*</text>
						<text class="container__list--item--text-des">
							<text>调班人：</text>
							<text>{{name1}}</text>
						</text>
					</view>
					<view class="container__list--item--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="container__list--text">
					<text class="container__list--text-des">调班时间：</text>
					<text class="container__list--text-des">{{date1}}</text>
				</view>
				<view class="container__list--text">
					<text class="container__list--text-des">班次：</text>
					<text class="container__list--text-des">{{attend1}}</text>
				</view>
			</view>
			<view class="container__des">班次2</view>
			<view class="container__list">
				<view class="container__list--item" hover-class="clickable" @click="goSelct(2)">
					<view class="container__list--item--text">
						<text class="container__list--item--text-symbol">*</text>
						<text class="container__list--item--text-des">
							<text>调班人：</text>
							<text>{{name2}}</text>
						</text>
					</view>
					<view class="container__list--item--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="container__list--text">
					<text class="container__list--text-des">调班时间：</text>
					<text class="container__list--text-des">{{date2}}</text>
				</view>
				<view class="container__list--text">
					<text class="container__list--text-des">班次：</text>
					<text class="container__list--text-des">{{attend2}}</text>
				</view>
			</view>
			<view class="container__list" style="margin-top: 30rpx;">
				<view class="container__list--text" style="color: #000;">
					<text class="container__list--text-symbol" style="color: red;margin: 0 5rpx;">*</text>
					<text class="container__list--text-des">调班理由</text>
				</view>
				<view class="container__list--textarea" style="padding: 20rpx;">
					<u--input
					    placeholder="请输入"
					    border="none"
					    v-model="reason"
					  ></u--input>
				</view>
			</view>
		</steps>
	</view>
</template>

<script>
	import Steps from '@/pages/home/child/add-attend-apply/components/steps.vue'
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	
	export default {
		components: {
			Steps
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				index: 1,
				name1: '',
				attend1: '',
				date1: '',
				name2: '',
				attend2: '',
				date2: '',
				reason: '',
				disabled: false,
				checkResult: '',
				insflowid: ''
			}
		},
		onLoad(options) {
			let that = this;
			if(options.data) {
				this.data = JSON.parse(options.data)
				this.insflowid = options.insflowid;
				this.date1 = this.data.DateA;
				this.name1 = this.data.NameA;
				this.attend1 = this.data.TypeNameA;
				this.date2 = this.data.DateB;
				this.name2 = this.data.NameB;
				this.attend2 = this.data.TypeNameB;
				this.reason = this.data.Reason;
			}
			console.log(this.data)
		},
		computed: {
			brief() {
				return '调班班次：|' + this.date1 + ' ' + this.attend1 + ' ' + this.name1 + '|' + this.date2 + ' ' + this.attend2 + ' ' + this.name2
			},
			notEmpty() {
				return this.reason ? true : false
			},
			apiparam() {
				return {
					namea: this.name1,
					datea: this.date1,
					typea: this.type1,
					nameb: this.name2,
					dateb: this.date2,
					typeb: this.type2,
				}
			}
		},
		methods: {
			confirmDateTime(e) {
				this.datetime = moment(e).format('YYYY-MM-DD HH:mm:ss')
			},
			/**
			 * 触发流程环节通知
			 */
			trigFlowStepNotice(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'trigFlowStepNotice',
						code: 2,
						apiparam,
						success() {
							
						}
					})
				})
			},
			/**
			 * 添加调班申请
			 * @param {Object} apiparam
			 */
			changeAttendApply(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'changeAttendApply',
						code: 3,
						apiparam,
						success(res) {
							uni.showToast({
								title: '申请成功',
								icon: 'success'
							})
							resolve()
						}
					})
				})
			},
			/**
			 * 点击提交按钮申请流程后的回调
			 * @param {Object} v 回调参数
			 */
			confirm(v) {
				this.changeAttendApply({
					obsusername: this.obsusername,
					insflowid: v.insflowid,
					reason: this.reason,
					namea: this.name1,
					datea: this.date1,
					typea: this.type1,
					typenamea: this.attend1,
					nameb: this.name2,
					dateb: this.date2,
					typeb: this.type2,
					typenameb: this.attend2,
				}).then(() => {
					this.trigFlowStepNotice({
						insflowid: v.insflowid,
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/home/child/change-attend/index?data=' + JSON.stringify(v)
						})
					},500)
				})
			},
			goSelct(i) {
				this.index = i;
				uni.navigateTo({
					url: './select?index=' + i
				})
			},
			/**
			 * 班次选择页面传递参数
			 * @param {Object} v
			 */
			getChangeAttendData(v) {
				if(!v.index) return
				let isOk = this.checkDate(v.date);
				if(!isOk) {
					setTimeout(() => {
						uni.showToast({
							title: '只能选择本月及以后的日期',
							icon: 'none'
						})
					},500)
					return
				}
				switch(v.index) {
					case "1":
						this.attend1 = v.attend;
						this.date1 = v.date;
						this.name1 = v.name;
						this.type1 = v.attendType;
						isOk = this.checkDate(this.date1);
						break;
					case "2":
						this.attend2 = v.attend;
						this.date2 = v.date;
						this.name2 = v.name;
						this.type2 = v.attendType;
						isOk = this.checkDate(this.date2);
						break;
				}
			},
			/**
			 * 判断日期是否在本月之前
			 * @param {Object} v
			 */
			checkDate(v) {
				let monthFisrtDay = moment().startOf('month');
				let diff = moment(v).diff(monthFisrtDay,'days');
				return diff >= 0 ? true : false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		overflow-x: hidden;
		padding-bottom: 100rpx;
		
		&__des {
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
			font-size: 25rpx;
		}
		
		&__list {
			background-color: #fff;
			
			&--item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #eee;
				
				&--text {
					padding: 0 10rpx;
					
					&-symbol {
						color: red;
						margin: 0 5rpx;
					}
				}
			}
			
			&--text {
				padding: 0 20rpx;
				line-height: 70rpx;
				color: #aaa;
			}
			
		}
		
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
